<template>
  <div id="shuziren">
    <div class="step-two">
      <div class="two-search-box">
        <div class="two-search">
          <!-- <chuan /> -->
          <div @click="abc">教师信息：</div>
          <el-input
            v-model="form.nickName"
            clearable
            style="width: 360px"
            placeholder="输入姓名、工号"
          />
          <div
            class="all-btn"
            @click="search"
          >搜索</div>
        </div>
      </div>
      <div class="all-box">
        <div>
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <!-- 加序号 -->
            <el-table-column
              type="index"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="nickName"
              label="姓名"
            />
            <el-table-column
              prop="xnum"
              label="工号"
            />
            <el-table-column
              prop="createTime"
              label="创建时间"
            />
          </el-table>
          <div class="all-page">
            <el-pagination
              v-model:current-page="form.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import chuan from "@/components/chuan.vue";
export default {
  components: {
    chuan,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      form: {
        nickName: "",
        page: 1,
        limit: 10,
      },
    };
  },
  beforeUnmount() {
    console.log("beforeUnmount");
    // 清空 Vuex 中的状态
    this.$store.dispatch("clearSharedValue");
  },
  created() {
    this.getList();
  },
  methods: {
    abc() {
      console.log(111);
      this.$store.dispatch("updateSharedValue", "这是传递的值");
    },
    clearAddForm() {
      this.addForm = {
        agentName: "",
        cronTime: "",
        knowIds: [],
      };
    },
    search() {
      this.form.page = 1;
      this.getList();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCurrentChange(currentPage) {
      this.form.page = currentPage;
      this.getList();
      console.log(currentPage, 333);
    },
    getList() {
      const url = `/system/role/teacher/list`;
      const params = this.form;
      this.loading = true;
      this.$axios
        .get(url, { params })
        .then((response) => {
          const res = response;
          this.tableData = res.data;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#shuziren {
  .step-two {
    .all-box {
      padding: 38px 52px;
    }
    .all-btn {
      height: 36px;
      line-height: 36px;
    }
    .two-search-box {
      display: flex;
      justify-content: space-between;
    }
    .two-search {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      :deep(.el-input__inner) {
        height: 38px;
      }
    }
    .two-btns {
      display: flex;
      gap: 10px;
    }
    .el-table {
      margin-bottom: 20px;
      :deep(th) {
        color: #7a8cb0;
      }
      .table-btns {
        display: flex;
        gap: 20px;
        > div {
          cursor: pointer;
          color: #457aff;
          &:hover {
            color: #2657b8;
          }
        }
      }
    }
  }
}
</style>